<!-- 查看租机订单信息 -->
<template>
  <div class="container" v-loading="loading">
    <el-divider content-position="left"><span class="title-left-color">订单信息</span></el-divider>
    <div style="margin: 0 70px">
      <el-descriptions :column="4" size="default">
        <el-descriptions-item label="订单号:">{{ form.order_sn }}</el-descriptions-item>
        <el-descriptions-item label="下单平台:">{{ form.platform_name }}</el-descriptions-item>
        <el-descriptions-item label="手机品牌:">{{ form.brand_name }}</el-descriptions-item>
        <el-descriptions-item label="手机型号:">{{ form.model_name }}</el-descriptions-item>
        <el-descriptions-item label="手机内存:">{{ form.sku_key_name }}</el-descriptions-item>
        <el-descriptions-item label="成色:">{{ form.fineness_name }}</el-descriptions-item>

        <el-descriptions-item label="手机售价:">{{ form.goods_price }}</el-descriptions-item>
        <el-descriptions-item label="买断价:">{{ form.total_amount }}元</el-descriptions-item>
        <el-descriptions-item label="租赁模式:">{{ form.order_rent_type.name }}</el-descriptions-item>
        <el-descriptions-item label="扣款期数:">{{ form.issue }}</el-descriptions-item>
        <el-descriptions-item label="创建时间:">{{ handleVerifyFormatDate(form.create_time) }}</el-descriptions-item>
        <el-descriptions-item label="服务:">{{ form.service_key_name }}</el-descriptions-item>
        <el-descriptions-item label="确认收货时间(只用于抖音核销)" v-if="form.confirm_time !== 0">{{ form.confirm_time }}</el-descriptions-item>
        <el-descriptions-item v-if="form.out_bill_no" label="抖音(快手，美团)小店订单号">{{ form.out_bill_no }}</el-descriptions-item>
        <el-descriptions-item label="达人名称" v-if="form.douyin_order_cps">{{ form.douyin_order_cps.commission_user_nickname }}</el-descriptions-item>
        <el-descriptions-item label="来源" v-if="form.douyin_order_cps">{{ form.douyin_order_cps.source_type_name }}</el-descriptions-item>
        <el-descriptions-item label="佣金" v-if="form.douyin_order_cps">{{ form.douyin_order_cps.total_commission_amount }}</el-descriptions-item>
        <el-descriptions-item label="下单人姓名:">{{ form.name }}</el-descriptions-item>
        <el-descriptions-item label="手机号:">{{ form.mobile }}</el-descriptions-item>
      </el-descriptions>
    </div>
    <div style="margin: 0 70px">
      <el-descriptions :column="1" size="default">
        <el-descriptions-item label="收货地址:">{{ form.province_name }}{{ form.city_name }}{{ form.district_name }} {{ form.address }}</el-descriptions-item>
      </el-descriptions>
      <el-descriptions :column="1" size="default">
        <el-descriptions-item label="用户备注:">{{ form.user_note }}</el-descriptions-item>
      </el-descriptions>
      <el-descriptions :column="1" size="default">
        <el-descriptions-item label="平台备注:">{{ form.admin_note }}</el-descriptions-item>
      </el-descriptions>
    </div>
    <el-divider content-position="left"><span class="title-left-color">账单信息</span></el-divider>
    <BillsList :tableList="billsList" />
    <el-divider content-position="left" v-if="form.store.store_name !== ''"><span class="title-left-color">手机来源</span></el-divider>
    <div style="margin: 0 70px" v-if="form.store.store_name !== ''">
      <el-descriptions :column="4" size="default">
        <el-descriptions-item label="店铺:">{{ form.store.store_name }} {{ form.store.store_phone }}</el-descriptions-item>
        <el-descriptions-item label="c端用户:">{{ form.publish_user?.mobile }}</el-descriptions-item>
      </el-descriptions>
    </div>
    <el-divider content-position="left" v-if="form.bindStore.store_name !== ''"><span class="title-left-color">绑定店铺、业务员信息</span></el-divider>
    <div style="margin: 0 70px" v-if="form.bindStore.store_name !== ''">
      <el-descriptions :column="4" size="default">
        <el-descriptions-item label="店铺名称:">{{ form.bindStore.store_name }}</el-descriptions-item>
        <el-descriptions-item label="手机号:">{{ form.bindStore.store_phone }}</el-descriptions-item>
        <el-descriptions-item label="业务员:">{{ form.bindStore.staff_name }}</el-descriptions-item>
      </el-descriptions>
    </div>
    <el-divider content-position="left"><span class="title-left-color">操作记录</span></el-divider>
    <OrderActionList :tableList="orderActionList" />
    <div class="footer-center">
      <el-button @click="cancelSubmit">返 回</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import BillsList from "@/components/rentMachineManage/rentMachineOrderInfo/formtab/BillsList.vue";
import OrderActionList from "@/components/rentMachineManage/rentMachineOrderInfo/formtab/OrderActionList.vue";
import { handleVerifyFormatDate } from "@/utils/utils";
import type { IOrderAction, IRentBill, IRentMachineOrderDetailVO } from "@/types/rentMachineManage/rentMachineOrderInfo";
import { getRentMobileOrderByIdInfo } from "@/utils/api/rentMobileOrder";
import type { HasId, ViewMode } from "@/types/common";
import { useState } from "@/hooks/useState";
const { loading, toggleState } = useState();
interface Props {
  id: number;
}
const { id } = defineProps<Props>();
const emit = defineEmits<{
  handleInitData: [];
}>();

const formStatus = defineModel<ViewMode>("formStatus", { required: true });

/* 租赁模式id */
const rentMode = ref<string | number>("");
/* 账单 */
const billsList = ref<IRentBill[]>([]);
/* 订单操作记录 */
const orderActionList = ref<IOrderAction[]>([]);
const form = reactive<IRentMachineOrderDetailVO>({
  id: 0,
  order_sn: "",
  brand_name: "",
  model_name: "",
  goods_name: "",
  sku_key_name: "",
  goods_price: "",
  total_amount: "",
  service_key_name: "",
  name: "",
  mobile: "",
  province_name: "",
  city_name: "",
  district_name: "",
  address: "",
  user_note: "",
  admin_note: "",
  fineness_name: "",
  bindStore: {
    staff_name: "",
    store_name: "",
    store_phone: "",
    store_id: 0
  },
  order_action: [],
  create_time: 0,
  pay_time: 0,
  cancel_time: 0,
  shipping_time: 0,
  platform_name: "",
  issue: 0,
  id_number: "",
  cat_id: 0,
  cat_id1: 0,
  cat_id2: 0,
  store_cat_id: 0,
  store_cat_id1: 0,
  store_cat_id2: 0,
  goods_id: 0,
  sku_key: "",
  province: 0,
  city: 0,
  district: 0,
  platform: "",
  platform_approval_status: "",
  rent_mobile_order_type: "",
  advance_price: "",
  store: {
    store_name: "",
    store_phone: ""
  },
  confirm_time: 0,
  order_rent_type_id: "",
  order_rent_type: {
    id: 0,
    name: "",
    is_advance: 0
  },
  is_recovery: 0,
  douyin_order_cps: null,
  master_name: "",
  card_contract_package_name: "",
  deposit_price: "",
  subsidy_price: "",
  promoter_user_mobile: "",
  fineness: "",
  is_guest_publish: 0,
  publish_user: {
    mobile: ""
  },
  stage_type: "",
  stage_type_name: "",
  is_receipt_signed: 0,
  bills: [],
  deduction_data: 0,
  order_receipt_esign: null,
  out_bill_no: "",
  brand: "",
  bind_store_id: 0
});
/* 租赁手机相关模式 */
const rentMode2 = computed(() => {
  return [13, 14, 15, 22, 28].includes(+rentMode.value);
});
/* 共享手机模式 29 删除 */
const rentMode1 = computed(() => {
  return [30].includes(+rentMode.value);
});

/* formStatus处理器 */
const statusHandlers: Record<ViewMode, () => void> = {
  view: () => {
    // isDisabledbtn.value = true;
  },
  add: () => {},
  edit: () => {},
  none: () => {
    /* 初始化数据 */
    handleInitData();
  }
};
/* 监听formStatus,新增，编辑，查看的时候都可以打开模态框，又是有不同的操作和效果，需要单独判断，none为模态框关闭的情况，需要初始化数据 */
watch(formStatus, newValue => {
  const handler = statusHandlers[newValue];
  handler?.();
});
/*  */
watch(
  () => id,
  newValue => {
    if (newValue == 0) {
      /* 初始化数据 */
      handleInitData();
    } else {
      if (formStatus.value == "view") {
        form.id = newValue;
        handleGetMallOrderByIdInfo(id);
      }
    }
  }
);
/* 初始化数据 */
function handleInitData() {
  form.id = 0;
  rentMode.value = "";
  form.order_sn = "";
  form.brand_name = "";
  form.model_name = "";
  form.cat_id = "";
  form.cat_id1 = "";
  form.goods_name = "";
  form.goods_id = "";
  form.brand = "";
  form.order_rent_type_id = "";
  form.sku_key = "";

  form.sku_key_name = "";
  form.goods_price = "";
  form.advance_price = "";
  form.issue = 5;
  form.total_amount = "";
  form.service_key_name = "";
  form.name = "";
  form.mobile = "";
  form.province = "";
  form.city = "";
  form.district = "";
  form.province_name = "";
  form.city_name = "";
  form.district_name = "";
  form.address = "";
  form.user_note = "";
  form.admin_note = "";
  form.fineness_name = "";
  form.bindStore.staff_name = "";
  form.bindStore.store_name = "";
  form.bindStore.store_phone = "";

  form.store.store_name = "";
  form.store.store_phone = "";

  form.publish_user = null;

  form.order_action = [];
  form.create_time = 0;
  form.pay_time = 0;
  form.cancel_time = 0;
  form.shipping_time = 0;
  form.platform_name = "";

  billsList.value = [];
  orderActionList.value = [];
}

/* 获取订单详情数据 */
function handleGetMallOrderByIdInfo(id: number) {
  toggleState(true);
  getRentMobileOrderByIdInfo<IRentMachineOrderDetailVO, HasId>({ id })
    .then(res => {
      form.id = res.result.id;

      rentMode.value = res.result.order_rent_type.is_advance;
      form.cat_id1 = res.result.cat_id1;
      form.order_sn = res.result.order_sn;
      form.platform = res.result.platform;
      form.platform_name = res.result.platform_name;

      form.mobile = res.result.mobile;
      form.id_number = res.result.id_number;
      form.name = res.result.name;
      form.issue = res.result.issue;

      form.province = res.result.province;
      form.province_name = res.result.province_name;
      form.city = res.result.city;
      form.city_name = res.result.city_name;
      form.district = res.result.district;
      form.district_name = res.result.district_name;
      form.address = res.result.address;
      form.user_note = res.result.user_note;
      form.admin_note = res.result.admin_note;

      form.brand = res.result.store_cat_id;
      form.brand_name = res.result.brand_name;
      form.goods_id = res.result.goods_id;
      form.model_name = res.result.model_name;

      if (res.result.order_rent_type) {
        form.order_rent_type_id = res.result.order_rent_type.id;
        form.order_rent_type.name = res.result.order_rent_type.name;
      }
      form.total_amount = res.result.total_amount;
      form.sku_key = res.result.sku_key;
      form.sku_key_name = res.result.sku_key_name;
      form.fineness_name = res.result.fineness_name;
      form.goods_price = res.result.goods_price;

      if (rentMode1.value) {
        form.goods_price = res.result.goods_price;
      } else if (rentMode2.value) {
        form.goods_price = res.result.total_amount;
      } else {
        form.goods_price = res.result.total_amount;
      }

      form.advance_price = res.result.advance_price;
      form.master_name = res.result.master_name;
      form.promoter_user_mobile = res.result.promoter_user_mobile;
      form.deposit_price = res.result.deposit_price;
      form.subsidy_price = res.result.subsidy_price;
      form.stage_type = res.result.stage_type;
      form.stage_type_name = res.result.stage_type_name;
      form.confirm_time = res.result.confirm_time;

      if (["douyinStore", "kuaishouStore", "kuaishouStoreRent", "taobao", "wechat", "meituanStore"].includes(res.result.bills[0].pay_source)) {
        form.out_bill_no = res.result.bills[0].out_bill_no;
      }
      form.create_time = res.result.create_time;
      form.deduction_data = res.result.deduction_data;

      if (res.result.douyin_order_cps !== null) {
        form.douyin_order_cps = res.result.douyin_order_cps;
      }

      if (res.result.bindStore !== null) {
        form.bind_store_id = res.result.bindStore.store_id;
        form.bindStore.store_name = res.result.bindStore.store_name;
        form.bindStore.store_phone = res.result.bindStore.store_phone;
        form.bindStore.staff_name = res.result.bindStore.staff_name;
      }
      if (res.result.store !== null) {
        form.store.store_name = res.result.store.store_name;
        form.store.store_phone = res.result.store.store_phone;
      }
      if (res.result.publish_user !== null) {
        form.publish_user!.mobile = res.result.publish_user.mobile;
      }

      form.service_key_name = res.result.service_key_name;

      form.bindStore = res.result.bindStore;
      form.create_time = res.result.create_time;
      form.pay_time = res.result.pay_time;
      form.cancel_time = res.result.cancel_time;
      form.shipping_time = res.result.shipping_time;
      billsList.value = res.result.bills;
      orderActionList.value = res.result.order_action;
    })
    .catch(() => {})
    .finally(() => {
      toggleState(false);
    });
}
/* 保存或编辑 取消提交 */
function cancelSubmit() {
  emit("handleInitData");
}
</script>

<style lang="scss" scoped>
/* layout-布局 */
.el-col {
  border-radius: 4px;
}
/* 底部按钮居中 */
.footer-center {
  margin: 10px 0;
  text-align: center;
}
</style>
